<template>
	<view class="pad-base">
		<u-navbar title="评价" titleColor="#fff" backIconColor="#fff" :background="navBg"></u-navbar>
		<view>
			<view class="bg-white pad-base round-corner">
				<view v-if="orderDetail.items" class="uni-flex pad">
					<template v-if="orderDetail.type === 'goods'">
						<view class="goods-img">
							<u-lazy-load :borderRadius="20" loading-img="/static/easy-loadimage/loading.gif"
								error-img="/static/img/img_home_quesheng@2x.png" :image="orderDetail.items[0].goods_thumb"
								:height="130" img-mode="aspectFill"></u-lazy-load>
						</view>
						<view class="uni-flex-extend uni-flex uni-column">
							<view class="uni-bold goods-info-name">{{orderDetail.items[0].goods_name}}</view>
							<view class="uni-bold" style="color: #D61719;">￥{{orderDetail.items[0].price / 100 || '0'}}</view>
						</view>
					</template>
					<template v-else>
						<view class="goods-img">
							<u-lazy-load :borderRadius="20" loading-img="/static/easy-loadimage/loading.gif"
								error-img="/static/img/img_home_quesheng@2x.png" :image="orderDetail.motorcadeInfo.thumbnail"
								:height="130" img-mode="aspectFill"></u-lazy-load>
						</view>
						<view class="uni-flex-extend uni-flex uni-column">
							<view v-if="orderDetail.type == 'subscribe'" class="uni-bold goods-info-name">{{orderDetail.items[0].script_name}}</view>
							<view v-else class="uni-bold goods-info-name">{{orderDetail.items[0].room_name}}</view>
							<view class="uni-bold" style="color: #D61719;">
								￥{{ ((orderDetail.total_fee || 0) - (orderDetail.discount_fee || 0)) / 100 }}</view>
						</view>
					</template>
				</view>
				<u-form ref="uForm" :model="formData" :borderBottom="false">
					<u-form-item label="体验感" labelWidth="auto">
						<view class="h-box">
							<u-rate :count="5" v-model="formData.score" gutter="20"></u-rate>
							<text class="uni-text-gray mg-l-sm">{{friendlyScoreText}}</text>
						</view>
					</u-form-item>
					<u-form-item prop="description">
						<view class="flex-h h-fill">
							<image src="../static/img/ic_pinjia_pinlun@2x.png" class="mg-r-xs"
								style="width: 37rpx;height: 37rpx;"></image>
							<view class="flex-extend">
								<u-input type="textarea" placeholder="从多个角度评价此次体验，可以帮助更多想玩的人" v-model="formData.description"
									:maxlength="200"></u-input>
							</view>
						</view>
					</u-form-item>
					<!-- <view class="mg-t-sm">
						<uni-file-picker v-model="formData.photos" fileMediatype="image" mode="grid" :limit="5"></uni-file-picker>
					</view>
					<view class="h-box mg-t-sm">
						<view class="flex-extend uni-text-gray">
							<u-checkbox v-model="formData.open" size="30" shape="circle">
								<text class="uni-text-gray text-bg">公开</text>
							</u-checkbox>
						</view>
						<text class="uni-text-gray text-bg">公开头像昵称，大家可以看到我</text>
					</view> -->
				</u-form>
			</view>
			<view style="width: 553rpx;margin: 0 auto;margin-top: 60rpx;">
				<u-button type="primary" @click="submitForm" shape="circle">
					<view style="font-size: 34rpx;">
						<image src="../static/img/ic_pinjia_anniu@2x.png" style="width: 50rpx;height: 50rpx;">
						</image>
						提交评价
					</view>
				</u-button>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getOrderDetail,
		createEvaluation
	} from "../../api/platform/order.js"
	import validator from '@/js_sdk/validator/t3ds-mall-goods-evaluation.js';
	import {
		mapState
	} from "vuex"

	function getValidator(fields) {
		let reuslt = {}
		for (let key in validator) {
			if (fields.indexOf(key) > -1) {
				reuslt[key] = validator[key]
			}
		}
		return reuslt
	}

	export default {
		data() {
			return {
				navBg: {
					'background-image': 'linear-gradient(to right, #434AD8, #8E77F5)'
				},
				formData: {
					score: 0,
					description: "",
					photos: [],
					open: true
				},
				orderDetail: {},
				rules: {
					description: [{
						required: true,
						message: '请输入内容',
						trigger: ['blur', 'change']
					}]
				}
			}
		},
		computed: {
			...mapState(["userInfo"]),
			friendlyScoreText() {
				if (this.formData.score > 4) {
					return '非常好'
				} else if (this.formData.score > 3) {
					return '好'
				} else if (this.formData.score > 2) {
					return '一般'
				} else if (this.formData.score > 1) {
					return '差'
				}
				return '非常差'
			}
		},
		onLoad(option) {
			if (option.orderId) {
				this.orderDetail._id = option.orderId;
			}
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
			this.loadData();
		},
		methods: {
			async loadData() {
				try {
					this.orderDetail = await getOrderDetail({
						id: this.orderDetail._id
					});
					this.formData.orderId = this.orderDetail._id;
				} catch (e) {
					console.error("加载订单详情遇到错误", e);
				}
			},
			/**
			 * 触发表单提交
			 */
			submitForm() {
				console.log('submitForm')
				this.$refs.uForm.validate(async valid => {
					console.log('valid', this.formData)
					if (valid) {
						uni.showLoading({
							title: '提交中...',
							mask: true
						})
						try {
							await createEvaluation({
								orderId: this.orderDetail._id,
								...this.formData
							});
							uni.showModal({
								title: "提示",
								content: "提交成功，感谢您的评价！",
								showCancel: false,
								confirmText: "返回",
								success: (res) => {
									this.getOpenerEventChannel().emit('saved')
									uni.navigateBack()
								}
							})
						} catch (e) {
							console.error("评价创建失败", e);
						}
					} else {
						console.log('验证失败');
					}
				});
			}
		}
	}
</script>

<style>
	page {
		background-color: #F5F5F5;
	}
</style>

<style lang="scss" scoped>
	/deep/ .u-input__textarea {
		padding: 0;
	}

	.uni-input-border,
	.uni-textarea-border {
		width: 100%;
		font-size: 14px;
		color: #666;
		border: 1px #e5e5e5 solid;
		border-radius: 5px;
		box-sizing: border-box;
	}

	.uni-input-border {
		padding: 0 10px;
		height: 35px;

	}

	.uni-textarea-border {
		padding: 10px;
		height: 80px;
	}

	.uni-button-group {
		margin-top: 50px;
		display: flex;
		justify-content: center;
	}

	.uni-button {
		width: 184px;
		padding: 12px 20px;
		font-size: 14px;
		border-radius: 4px;
		line-height: 1;
		margin: 0;
	}

	.goods-img {
		width: 190rpx;
		height: 130rpx;
		background-color: #ececec;
		border-radius: 20rpx;
		margin-right: 20rpx;
	}

	/deep/ .u-form-item__message {
		margin-left: 0 !important;
	}
</style>
